<template>
<div class="tableList">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="车牌号">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="报警原因">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
      <el-form-item label="车型">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
   <el-form-item label="时间" >
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="发生时间" v-model="formInline.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="修复时间" v-model="formInline.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
    
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="onSubmit" class="btn-query">查询</el-button>
  </el-form-item>
 
</el-form>
<div class="table-data">
    <el-table
      :data="tableData"
        border
      style="width: 95%"
       :cell-style="{ color: '#fff' }"
      :header-cell-style="{ background:'#004d8c', color: '#fff' }" > 
      <el-table-column
        prop="date"
        label="车牌号"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="报警原因"
        >
      </el-table-column>

          <el-table-column
        prop="address"
        label="发生故障时间">
      </el-table-column>
          <el-table-column
        prop="address"
        label="是否修复">
      </el-table-column>
          <el-table-column
        prop="address"
        label="车型">
      </el-table-column>
          <el-table-column
        prop="address"
        label="修复时间">
      </el-table-column>
    </el-table>
</div>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
           formInline: {
          user: '',
          region: ''
        },
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods:{
          onSubmit(){
        console.log('submit!');
      }
      }
    }
  </script>
<style lang="css" scoped>
@import url("../../assets/css/layout.css");

.el-form-item__label{
  color: #fff;
}
.el-input__inner{
  background-color: transparent !important;
  border: 1px solid #1296db;
}
.el-input >>>.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #1296db;
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
}

.el-table >>>.el-table__header-wrapper{
  background-color: #004586;
}

</style>
